import QtQuick 2.12

import QtQuick
import QtQuick.Controls

import QtQuick.LocalStorage 2.15 // 使用最新稳定版


//![0]
Column{
    width: 2000// 必须设置Column的宽度
    height: 700
    spacing: 5          // 子项间距（可选）
    ListView {
        id: listview
        width: 200; height: 200
        //required property var model // 正确声明
        ScrollBar.vertical: ScrollBar { }
        //required property var model // 正确声明
        model:myModel
        delegate: Rectangle {
            width: listview.width; height: 25

            required property string name // 从模型获取 name
            required  color // 从模型获取 color 直接属性给Rectangle color赋值  方法1 不需要单独设置color属性

           // required property string color // 从模型获取 color


            Text {
                text: parent.name +" "+ parent.color
            }

            // 监听 name 的变化（假设信号名是 nameChanged）
           // onNameChanged: console.log("Name changed to:", name)

            MouseArea {
               anchors.fill: parent
               onClicked: parent.name  = "Banana"  // 修改属性会触发 C++ 的 setter 和信号
            }
        }
    }
    //sqlite数据库
    Rectangle {
        color: "red"
        width: 200
        height: 100
        clip: true
        Text {
                text: "?"
                anchors.horizontalCenter: parent.horizontalCenter
                function findGreetings() {
                    //var db = openDatabaseSync("QDeclarativeExampleDB", "1.0", "The Example QML SQL!", 1000000);
                    var db = LocalStorage.openDatabaseSync("MyDB", "1.0", "LocalStorage Example", 100000);
                    //创建表（如果不存在）
                    db.transaction(
                        function(tx) {
                            // Create the database if it doesn't already exist
                            tx.executeSql('CREATE TABLE IF NOT EXISTS Greeting(salutation TEXT, salutee TEXT)');

                            // Add (another) greeting row
                            tx.executeSql('INSERT INTO Greeting VALUES(?, ?)', [ 'hello', 'world' ]);

                            // Show all added greetings
                            var rs = tx.executeSql('SELECT * FROM Greeting');

                            var r = ""
                            for (var i = 0; i < rs.rows.length; i++) {
                                r += rs.rows.item(i).salutation + ", " + rs.rows.item(i).salutee + "\n"
                            }
                            text = r
                        }
                    )
                }
                Component.onCompleted: findGreetings()
            }
    }

    Row{
        spacing: 4
        //DelegateChooser QML Type
        ListView {
            width: 200
            height: 400
            spacing: 2

            // 数据模型（带不同类型的项）
            ListModel {
                id: listModel
                ListElement {
                    type: "info"
                    title: "普通信息项"
                    description: "这是一个只读信息"
                }
                ListElement {
                    type: "switch"
                    title: "开关控制"
                    checked: false
                }
                ListElement {
                    type: "swipe"
                    title: "滑动项"
                    content: "向左滑动显示操作"
                }
                ListElement {
                    type: "switch"
                    title: "夜间模式"
                    checked: true
                }
            }

            // 委托选择器
            DelegateChooser {
                id: chooser
                role: "type"

                // 1. 普通信息项
                DelegateChoice {
                    roleValue: "info"
                    ItemDelegate {
                        width: ListView.view.width
                        height: 60

                        Column {
                            anchors.fill: parent
                            anchors.margins: 10
                            spacing: 4

                            Label {
                                text: title
                                font.bold: true
                            }

                            Label {
                                text: description
                                color: "#666"
                                font.pixelSize: 12
                            }
                        }

                        onClicked: console.log("点击信息项:", title)
                    }
                }

                // 2. 开关项
                DelegateChoice {
                    roleValue: "switch"
                    SwitchDelegate {
                        width: ListView.view.width
                        height: 50
                        text: title
                        checked: model.checked

                        onCheckedChanged: {
                            model.checked = checked
                            console.log("开关状态变化:", title, checked)

                            // 根据开关执行不同操作
                            if (title === "夜间模式") {
                               // applicationWindow.background.color = checked ? "#222" : "white"
                            }
                        }
                    }
                }

                // 3. 滑动项
                DelegateChoice {
                    roleValue: "swipe"
                    SwipeDelegate {
                        id: swipeDelegate
                        width: ListView.view.width
                        height: 60
                        text: title

                        // 滑动后显示的操作按钮
                        swipe.right: Row {
                            anchors.right: parent.right
                            height: parent.height

                            ToolButton {
                                text: "置顶"
                                height: parent.height
                                onClicked: {
                                    console.log("置顶:", title)
                                    swipeDelegate.swipe.close()
                                }
                            }

                            ToolButton {
                                text: "删除"
                                height: parent.height
                                onClicked: {
                                    console.log("删除:", title)
                                    listModel.remove(index)
                                }
                            }
                        }

                        // 主内容区域
                        contentItem: Label {
                            text: content
                            elide: Text.ElideRight
                            verticalAlignment: Text.AlignVCenter
                        }
                    }
                }
            }

            model: listModel
            delegate: chooser

            // 添加边界装饰
            ScrollIndicator.vertical: ScrollIndicator {}
            clip: true
        }
        //DelegateModel 包含了模型和委托
        Rectangle {
            width: 200; height: 100
            DelegateModel {
                id: visualModel
                model: ListModel {
                    ListElement { name: "Apple" }
                    ListElement { name: "Orange" }
                }
                delegate: Rectangle {
                    height: 25
                    width: 100
                    Text { text: "Name: " + name}
                }
            }
            ListView {
                anchors.fill: parent
                model: visualModel
            }
        }
        //listElement 包含ListElement

        Rectangle {
            id:rectangle1
            color:"#909090"
            width: 200; height: 100
            DelegateModel {
                id: visualModel2
                model: ListModel {
                    id:listModel2
                    ListElement {
                        name: "Apple"
                        colors:[
                            ListElement{color:"red1"},
                            ListElement{color:"blue1"}
                        ]
                    }
                    ListElement {
                        name: "Orange"
                        colors:[
                            ListElement{color:"red2"},
                            ListElement{color:"blue2"}
                        ]
                    }
                }
                delegate: Rectangle {
                    height: 50
                    width:rectangle1.width

                    color:"#909090"
                    Text {
                        id:title
                        text: "Name: " + name
                    }
                    Row{
                        anchors.top: title.bottom
                        spacing: 5
                        Text{
                            text: "colors:"
                        }
                        Repeater{
                            model: colors
                            Text{
                            text: color
                            }
                        }

                    }
                    //index 索引
                    MouseArea {
                        anchors.fill: parent
                        onClicked: listModel2.setProperty(index, "name", name + " "+ index  )
                    }
                }
            }
            ListView {
                anchors.fill: parent
                model: visualModel2
            }
        }

        Rectangle {
            width: 100
            // 自动计算所需高度（子项高度总和 + 间距）
            height: listView2.contentHeight // 20是额外边距
            color:"#666666"
            ObjectModel {
                id: itemModel1
                Rectangle {
                    height: 30; width: 80; color: "red" }
                Rectangle {
                    height: 30; width: 80; color: "green" }
                Rectangle {
                    height: 30; width: 80; color: "blue"
                }
            }

            ListView {
                id: listView2
                width: parent.width
                // 高度由父Rectangle控制
                height: contentHeight // 关键：自动适应内容高度
                model: itemModel1
                // 居中对齐子项
                header: Item { width: parent.width; height: 10 } // 顶部留白
                footer: Item { width: parent.width; height: 10 } // 底部留白
            }
        }
        //指定已命名项目的集合
        Rectangle{
            width: 300
            height:300
            Package {

                Text { id: listDelegate; width: 100; height: 25; text: 'Empty'; Package.name: 'list' }
                Text { id: gridDelegate; width: 100; height: 50; text: 'Empty'; Package.name: 'grid' }

                Rectangle {
                    id: wrapper
                    width: 100; height: 25
                    color: 'lightsteelblue'

                    Text { text: "display"; anchors.centerIn: parent }
                    state: 'inGrid'
                    states: [
                        State {
                            name: 'inList'
                            ParentChange { target: wrapper; parent: listDelegate }
                        },
                        State {
                            name: 'inGrid'
                            ParentChange {
                                target: wrapper; parent: gridDelegate
                                x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height
                            }
                        }
                    ]

                    transitions: [
                        Transition {
                            ParentAnimation {
                                NumberAnimation { properties: 'x,y,width,height'; duration: 300 }
                            }
                        }
                    ]
                }
            }
        }
    }

}
